    <!--
    * @Author: GY_books 2567610535@qq.com
    * @Date: 2024-09-12 11:30:41
    * @LastEditTime: 2024-11-15 14:08:44
    * @LastEditors: GY_books 2567610535@qq.com
    * @FilePath: \APSVUE\src\components\ComVxeTable\ComVxeTablev3.vue
    * @描述: 头部注释配置模板
    -->
    <template>
      <div div class="flex_column w-full h-full">
        <div class="flex-1">
          <vxe-table ref="vxeTable" :border="true" highlight-current-row highlight-hover-row id="vxeTable_1"
            height="100%" size="mini" show-overflow="tooltip" :loading="tableDatas.loading" :checkbox-config="{
              highlight: true,
              checkField: 'isChecked',
            }" :data="tableDatas.data || []" :resizable-config="{
              minWidth: '16',
            }" :scroll-x="{
              enabled: true,
            }" :scroll-y="{
                enabled: true,
              }" :tree-config="treeConfig" :edit-config="editConfig" :cell-style="cellStyle" auto-resize resizable
            @checkbox-change="handleCheckboxChange" @checkbox-all="handleCheckboxChange" :keep-source="true">
            <!-- 序号列 -->
            <vxe-column type="seq" min-width="45" fixed="left" v-if="IsIndex" title="序号"></vxe-column>
            <template v-for="(colItem, colIndex) in tableDatas.column">
              <template v-if="colItem && colItem.children && colItem.children.length">
                <VxeColumnGroup :colItem="colItem" :colIndex="colIndex" :title="colItem.label"></VxeColumnGroup>
              </template>
              <template v-else>
                <VxeColumnItem v-if="Number(colItem.width) && colItem.visible" :colItem="colItem" :colIndex="colIndex">
                </VxeColumnItem>
              </template>
            </template>
          </vxe-table>
        </div>
      </div>
    </template>
<script>
import VxeColumnGroup from './components/VxeColumnGroup.vue';
import VxeColumnItem from './components/VxeColumnItem.vue';
export default {
  name: 'ComVxeTableV3',
  components: {
    VxeColumnItem,
    VxeColumnGroup,
  },
  props: {
    config: {},
    tableDatas: {
      type: Object,
      default: function () {
        return {};
      },
    },
    // 合计包含哪些字段
    includeFields: {
      type: Array,
      default: function () {
        return [];
      },
    },
    IsIndex: {
      type: Boolean,
      default: false,
    },
    // 传行内列样式
    cellStyle: {
      type: Function,
      default: function ({ row, column }) {
        let style = {}; // 创建一个空的样式对象
        const key = column.property;
        if (
          Object.prototype.toString.call(row['FColors']) ===
          '[object Object]' &&
          key in row['FColors']
        ) {
          style.color = row['FColors'][key]; // 设置文本颜色
        }
        if (
          Object.prototype.toString.call(row['BColors']) ===
          '[object Object]' &&
          key in row['BColors']
        ) {
          style.backgroundColor = row['BColors'][key]; // 设置背景颜色
        }
        return style; // 返回样式对象
      },
    },
    // 行样式
    tableRowClassName: {
      type: Function,
      default: () => {
        return null;
      },
    },
    // 控制选框条件
    checCheckboxkMethod: {
      type: Function,
      default: () => {
        return true;
      },
    },
    // 固定合并列显示
    fixSpanMethods: {
      type: Boolean,
      default: false,
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: true,
    },
    // 查询的时候需要过滤哪个表格的数据
    filtertb: {
      type: Number,
      default: -1,
      required: false,
    },
    //单击是否可编辑
    isEdit: {
      type: Boolean,
      default: false,
    },
    //是否合计
    summary: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    isMultiple: {
      type: Boolean,
      default: true,
    },
    // 系统id
    sysID: {
      type: Number,
      default: 0,
    },
    // 是否禁用选框
    forbidden: {
      type: Boolean,
      default: false,
    },
    unifypagination: {
      type: Boolean,
      default: false,
    },
    footerLabel: {
      type: String,
      default: '',
      required: false,
    },
    pagination: {
      type: Object,
      default() {
        return {
          pageIndex: 0,
          pageSize: 30,
          pageTotal: 0,
        };
      },
    },
    height: {
      type: String,
      required: false,
      default: '600px',
    },
    rowKey: {
      type: String,
      required: true,
    },
    treeConfig: {
      type: Object,
      default() {
        return {
          children: 'children',
          iconOpen: 'vxe-icon-square-minus-fill',
          iconClose: 'vxe-icon-square-plus-fill',
          expandAll: false,
        };
      },
    },
    // 选框禁用或显示操作
    // 是否显示选框
    forbidden: {
      type: Boolean,
      default: false,
    },
    // 是否单击需要勾选
    isToggleCheckbox: {
      type: Boolean,
      default: false,
    },
    // 是否要合并
    isSpanMethods: {
      type: Boolean,
      default: false,
    },
    // 是否有选框
    hasSelect: {
      type: Boolean,
      default: false,
    },
    // 是否清除选框
    isClear: {
      type: Boolean,
      default: false,
    },
    // 是否出现编辑跟删除
    isEditDel: {
      type: Boolean,
      default: false,
    },
    // 是否显示删除
    condition: {
      type: Function,
      default: function () {
        return true;
      },
    },
    // 表格的下标
    remark: {
      type: Number,
      required: false,
    },
    // 头部黄色，可编辑状态
    yellowHeader: {
      type: Boolean,
      default: false,
    },
    // 头部深蓝色，查看状态
    blueHeader: {
      type: Boolean,
      default: false,
    },
    // 默认当前用户显示表格的列
    defaultTableHeader: {
      type: Array,
      default: function () {
        return [];
      },
      required: false,
    },
    isToolbar: {
      type: Boolean,
      default: true,
    },
    //虚拟滚动
    scrollEnable: {
      type: Boolean,
      default: true,
    },
    // 懒加载
    keepSource: {
      type: Boolean,
      default: false,
    },
    // 控制可编辑列 某行不可编辑
    cellLock: {
      type: Object,
      default: function () {
        // prop 字段需要控制的列，paramsProp控制的字段
        return {};
      },
    },
  },
  data() {
    return {
      // 编辑配置项
      editConfig: {
        trigger: 'dblclick',
        mode: 'row',
        showIcon: false,
        autoClear: false,
      },
    };
  },
  methods: {
    checkboxkMethod() { },
    // 处理选择列全选和改变
    handleCheckboxChange() { },
  },
  computed: {
    tableData() {
      return this.tableDatas.data;
    },
  },
  watch: {},
  updated() {
    this.spread = this.$refs.vxeTable;
    this.spread.loadData(this.tableData); //加载数据
    // 每次组件更新 把表格实例 返回给父组件
    this.$emit('workbookInitialized', this.spread, this.remark);
  },
};
</script>
<style lang="scss" scoped>
.toolbar {
  position: absolute;
  /* width: 100px; */
  z-index: 99;
  height: 30px;
  left: 110px;
  top: 6px;
  background: rgba(0, 0, 0, 0);
}

:deep(.vxe-button.type--button ){
  height: 30px !important;
}

:deep(.vxe-button.type--button.is--circle ){
  min-width: 30px !important;
}

:deep(.vxe-toolbar .vxe-custom--option-wrapper ){
  bottom: 0;
  left: 50px;
  right: auto;
}

//表位行高
:deep(.vxe-footer--row) {
  height: 35px;
}

//表头底色
:deep(.vxe-header--row) {
  background-color: #f3f3f3;
}

//表头底部线
:deep(.vxe-table--header-border-line) {
  border-bottom: 1px solid #b9b9b9 !important;
}

//列表边框线宽度和颜色
:deep(.vxe-table--render-default.border--full .vxe-body--column) {
  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
  // background-size: 2px 100%, 100% 2px;
}

//列表表头表尾线宽度和颜色
:deep(.vxe-table--render-default.border--full .vxe-header--column,
  .vxe-table--render-default.border--full .vxe-footer--column) {
  background-image: linear-gradient(#b9b9b9, #b9b9b9),
    linear-gradient(#b9b9b9, #b9b9b9);
}


.el-select {
  width: 100%;
}

.filter-tooltip {
  padding: 5px 10px 0 10px;
  text-wrap: wrap;
  max-width: 170px;
}
</style>
